<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作，元素以及元素内容的部分
		 .html()    无参-----功能：获取匹配元素中第一元素的内容
                    有参----功能：   【设置】】将匹配元素集合中所有元素替换为新元素
		特点：针对   内容  +  元素			
		  .val()    无参---功能：表单内元素：input，select生效
		                    获取表单元素中第一元素的内容				
					有参---功能：表单内元素：input，select生效		
		     			     input元素直接显示  value
		                    select元素不是显示 value
							option  元素中内容，用户显示
							option 元素中value值，
							必须当前select中，option元素value值
							直接赋值：打印select元素名称【object Object]
		特点：	针对  （表单内form元素可以包裹）	元素的内容	
					
		 .text()                 无参------功能：获取匹配元素集合中所有元素的文本内容
		                         有参------功能：【设置】获取匹配元素集合中所有元素的文本
								             内容替换
			特点：元素中存在内容								 
		 -->
		 <script src="../js/jquery-1.11.1(1).js"></script>
	</head>
	<body>
		<h1>html（）函数使用</h1>
		<button>按钮 针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮--针对val（）函数-无参</button>
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="输入框显示效果[提示]">
		<!--html:按钮 下拉列表   select>option*3  需要加value -->
		<!-- jq: 点击按钮  设置下拉列表  |  html()与val()有参是否存在区别 -->
	   <h1>()函数使用</h1>
		<button>按钮--针对val（）函数-有参</button>
	 <select>
	 	<option value="rem1">lorem1</option>
	 	<option value="rem2">lorem2</option>
	 	<option value="rem3">lorem3</option>
	 </select>
	 <h1>text()函数使用</h1>
	 <button class="btn1">按钮--针对text（）函数-无参</button>
	 <button class="btn2">按钮--针对text（）函数-有参</button>
	   <p>lorem4</p>
	   <p>lorem5</p>
	   <p>lorem6</p>
		<script>
			//1.找到 类名为   btn1 的按钮---点击----弹窗内容  三个 p元素内容
			$(".btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
		//2.找到 类名为   btn2 的按钮--点击---lorem4/5/6   改成  ”修改文本“
		$(".btn2").click(function(){
			$("p").text("修改文本");

		});	
			
			
			
			
			
			
			
		//$("button").click(function(){
			//抓下拉列表的value值---select
			//设置元素第一个的值   1.直接设置下拉列表中value的值
			//$("select").val("rem1");
			//设置元素第一个值  2.给第一个值添加，设置的内容【本身存在】
			//var rem=$("select").val();
			
			
			//[objec Object]   JavaScript中  对象的默认字符串表示形态
			//select元素 对象  输出【object Object】
			
			
			//value的值：真实数据  option中值：显示数据
			//objec Object  测试  无参
			//alert("val()有参函数："+rem)
		//});
			
			
			
			//动态效果：点击按钮。获取第一个表单元素内容，元素打印出来
		//	$("button").click(function(){
				/* 注意：js变量名  in是关键字！   in是关键字 */
			//	var ins=$("input").val();
			//	alert("val()函数无参"+ins);
			//});
			
			
			
			
			
			// 有参：点击按钮--下面两个span改成lorem，，lorem
			/* $("button").click(function(){
				$("span").html("<span>lorem</span>");
			}); */
			
			
			
			//js变量【var i=1】==jq变量 var 变量名=值，元素
			//无参数          html()函数使用
			/* var html=$("span").html();
			//BOM方式  打印数据
			alert("无参数获取第一个元素内容"+html); */
		</script>
	</body>
</html>